<template>
	<view>
		<view class="header" style="border-radius: 0 0 15rpx 15rpx;">
			<view class="header-top">
				<uv-swiper :list="businessInfo.businessImages" keyName="activityImgUrl" :autoplay="false" height="300" radius="0"></uv-swiper>
				<view class="header-name" style="background-color: #fff;padding: 20rpx;">
					<view class="title" style="font-weight: 700;font-size: 36rpx;">{{ businessInfo.businessName }}</view>
					<view class="" style="display: flex;align-items: center;justify-content: space-between;">
						<view class="" style="padding: 20rpx 0;font-size: 26rpx;color: #999;width: 450rpx;">
							{{ businessInfo.businessAddress.address }}{{ businessInfo.businessAddress.inDetail }}
							<u-icon name="arrow-right" size="14"></u-icon>
						</view>
						<view class="" style="display: flex;align-items: center;height: 70rpx;background-color: #f7f7f7;font-size: 26rpx;padding: 0 20rpx;border-radius: 35rpx;" @click="goMap">
							<uv-icon name="map" size="13" color="#000"></uv-icon>
							{{ businessInfo.distance }}km
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 在售商品 -->
		<view class="con">
			<view class="title">在售商品</view>
			<view class="goodslist">
				<view v-for="(item, index) in goodsList" :key="index" style="margin-bottom: 40rpx;" @click="goPath(item.id)">
					<image :src="item.previewUrl" mode="" style="width:325rpx;height:325rpx;border-radius: 20rpx;"></image>
					<view class="" style="font-size: 32rpx;font-weight: 700;width:325rpx;">{{ item.goodsName }}</view>

					<view class="" style="font-size: 22rpx;color: #999;padding: 20rpx 0;">{{ item.businessName }}</view>
					<view class="" style="color: #6d21db;font-weight: 700;">￥{{ item.goodsPrice }}</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-c" @tap="gophone(businessInfo.businessMobile)">
				<view class="btn">
					<view class="btn-icon"><uv-icon name="phone" size="26"></uv-icon></view>
					<view class="btn-name">电话</view>
				</view>
			</view>

			<view class="footer-c" @tap="showPopup"><view class="name">门店微信</view></view>
		</view>
		<uv-popup ref="popup" :round="30" mode="center" closeable @close="close" @open="open" :safeAreaInsetBottom="false">
			<view style="width: 540rpx;height: 600rpx;padding: 20rpx 30rpx;box-sizing: border-box;background-color:#ffdb64;border-radius: 20rpx;">
				<view class="" style="display: flex;align-items: center;justify-content: center;">
					<view class="" style="background-color: #fff;border-radius: 50rpx;font-size: 26rpx;font-weight: 700;height: 60rpx;line-height: 60rpx;padding: 0 20rpx;">
						{{ businessInfo.businessName }}
					</view>
				</view>
				<view class="" style="width: 100%;display: flex;justify-content: center;align-items: center;margin: 20rpx 0;">
					<view class="">
						<image
							style="width: 380rpx;height: 380rpx;"
							:show-menu-by-longpress="true"
							@click="previewImage"
							:src="businessInfo.weChatORCodeImage"
							mode=""
						></image>
					</view>
				</view>
				<view class="" style="display: flex;justify-content: center;align-items: center;color: #834818;font-size: 26rpx;">长按识别二维码添加门店微信领优惠</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
import { getBusinessInfoById, searchPlugsGoodsByCategoryId } from '../../utils/api.js';
export default {
	data() {
		return {
			businessId: '',
			businessInfo: {},
			goodlist: [],
			goodsList: [],
			total: 0,
			page: 1,
			mapInfo: {}
		};
	},
	onLoad(option) {
		console.log(option.businessId);
		this.businessId = option.businessId;
		this.mapInfo = uni.getStorageSync('mapInfo');
	},
	onShow() {
		this.page = 1;
		this.goodsList = [];
		this.getBusinessInfo();
		this.getGoodlist();
	},
	onReachBottom() {
		if (this.goodsList.length < this.total) {
			this.page++;
			this.getGoodlist();
		}
	},
	methods: {
		goMap() {
			wx.openLocation({
				latitude: Number(this.businessInfo.businessAddress.latitude),
				longitude: Number(this.businessInfo.businessAddress.longitude),
				name: this.businessInfo.businessName,
				address: this.businessInfo.businessAddress.address,
				scale: 28
			})
		},
		
		showPopup() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		
		gophone(phone) {
			console.log(phone);
			uni.makePhoneCall({
				phoneNumber: phone, //仅为示例
				success: function() {
					console.log('拨打电话成功');
				},
				fail() {
					console.log('打电话失败了');
				}
			});
		},
		// 获取店铺信息
		getBusinessInfo() {
			let data = {
				businessId: this.businessId
			};
			getBusinessInfoById(data).then(res => {
				if (res.code == 200) {
					this.businessInfo = JSON.parse(res.body.jsonData);
					console.log(this.businessInfo,696);
					this.businessInfo.businessImages = JSON.parse(this.businessInfo.businessImages);
					console.log(this.businessInfo);
					this.businessInfo.distance = this.space(
						this.businessInfo.businessAddress.latitude,
						this.businessInfo.businessAddress.longitude,
						this.mapInfo.location.lat,
						this.mapInfo.location.lng
					);
				}
			});
		},
		space(lat1, lng1, lat2, lng2) {
			console.log(lat1, lng1, lat2, lng2);
			var radLat1 = (lat1 * Math.PI) / 180.0;
			var radLat2 = (lat2 * Math.PI) / 180.0;
			var a = radLat1 - radLat2;
			var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
			s = s * 6378.137;
			s = (Math.round(s * 10000) / 10000).toFixed(2);
			return s; // 单位千米
		},
		getGoodlist() {
			let that = this;
			let data = {
				page: that.page,
				businessId: that.businessId,
				categoryId: -1
			};
			searchPlugsGoodsByCategoryId(data).then(res => {
				if (res.code == 200) {
					if (this.page == 1) {
						this.goodsList = [];
					}
					let arr = [];
					arr = this.goodsList.concat(res.body.list);
					this.goodsList = arr;
					this.total = res.body.total;
				}
			});
		},

		goPath(id) {
			uni.navigateTo({
				url: `/pages/porduct/porduct?id=${id}`
			});
		},
		goGua() {
			uni.navigateTo({
				url: '/pages/guarantee/guarantee'
			});
		},
	}
};
</script>

<style lang="less">
page {
	background-color: #f5f5f5;
	padding: 0;
}

.con {
	margin-top: 30rpx;
	padding: 30rpx;
	background-color: #fff;
	padding-bottom: 130rpx;
	.title {
		font-size: 36rpx;
		font-weight: 700;
		padding: 0 0 20rpx;
	}

	.goodslist {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
}
.footer {
	width: 100%;
	height: 120rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 30rpx 0 100rpx;
	box-sizing: border-box;
	.footer-c {
		.btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			font-size: 26rpx;
			.btn-icon {
			}
			.btn-name {
				color: #333;
			}
		}
		.name {
			width: 400rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			border-radius: 35rpx;
			background-color: #6d21db;
			color: #fff;
			font-weight: 700;
		}
	}
}
</style>
